<template>
  <view class="company-detail-container">
    <view class="header">
      <view class="back-button" @click="goBack">
        <image class="back-icon" src="/static/back.png"></image>
      </view>
      <text class="page-title">公司详情</text>
    </view>
    <view class="company-header">
      <image :src="company.logo" class="company-logo" />
      <view class="company-info">
        <view class="company-name-row">
          <view class="company-name">{{ company.company }}</view>
          <button class="favorite-btn-inline" @click="toggleFavorite" @longpress="unfavoriteCompany">
            <image 
              class="favorite-icon" 
              :src="isFavorite ? '/static/shouc.png' : '/static/shouc1.png'" 
              mode="aspectFit"
              style="opacity: 1; visibility: visible;"
            ></image>
          </button>
        </view>
        <view class="company-type">{{ company.type }}</view>
      </view>
    </view>
    <view class="company-tags">
      <text v-for="(tag, i) in (company && company.tags ? company.tags.slice(0, 4) : [])" :key="i" class="tag">{{ tag }}</text>
    </view>
    <view class="company-labels">
      <text v-for="(label, i) in (company && company.labels ? company.labels.slice(0, 4) : [])" :key="i" class="label">{{ label }}</text>
    </view>
    <view v-for="(sec, idx) in company.detailSections" :key="idx" class="section">
      <view class="section-title">{{ sec.title }}</view>
      <view class="section-content">{{ sec.content }}</view>
    </view>
    <view
      class="drawer"
      :style="drawerStyle"
      @touchstart="onDrawerTouchStart"
      @touchmove="onDrawerTouchMove"
      @touchend="onDrawerTouchEnd"
    >
      <view class="drawer-bar"></view>
      <!-- 一级筛选tab -->
      <view class="filter-row">
        <scroll-view scroll-x class="filter-scroll-row">
          <view
            v-for="item in drawerJobTypeTabs"
            :key="item"
            class="filter-btn"
            :class="{ active: drawerActiveJobType === item }"
            @click="setDrawerActiveJobType(item)"
          >{{ item }}</view>
        </scroll-view>
      </view>
      <!-- 二级筛选-->
      <view class="sub-filter-row">
        <view
          class="sub-filter-btn"
          v-for="sub in drawerSubFilters"
          :key="sub.key"
          @click="
            sub.key === 'city'
              ? openDrawerCityPopup()
              : sub.key === 'degree'
                ? openDrawerEducationPopup()
                : sub.key === 'exp'
                  ? openDrawerExperiencePopup()
                  : sub.key === 'salary'
                    ? openDrawerSalaryPopup()
                    : toggleDrawerSubFilter(sub.key)
        "
          :class="{ selected: drawerSubFilterSelected[sub.key] !== '不限' || drawerSubFilterVisible === sub.key, expanded: drawerSubFilterVisible === sub.key }"
        >
          <text v-if="sub.key !== 'city'">
            {{ drawerSubFilterSelected[sub.key] === '不限' ? sub.label : drawerSubFilterSelected[sub.key] }}
          </text>
          <text v-else>
            {{ drawerCityBtnText() }}
          </text>
          <text class="arrow">{{ isDrawerTabExpanded(sub.key) ? '▲' : '▼' }}</text>
          <view v-if="drawerSubFilterVisible === sub.key && !['city','degree','exp','salary'].includes(sub.key)" class="sub-filter-dropdown">
            <view class="dropdown-option" v-for="opt in sub.options" :key="opt" @click.stop="selectDrawerSubFilter(sub.key, opt)">{{ opt }}</view>
          </view>
        </view>
      </view>
      <!-- 城市弹窗 -->
      <view v-if="drawerCityPopupVisible" class="city-popup-mask" @click="closeDrawerCityPopup">
        <view class="city-popup city-popup-bottom" @click.stop>
          <view class="city-popup-header">
            <view class="city-popup-title">选择城市</view>
            <view class="city-popup-close" @click="closeDrawerCityPopup">×</view>
          </view>
          <view class="city-popup-content">
            <view v-if="Array.isArray(drawerSortedLocationData) && typeof drawerSortedLocationData[0] === 'object' && drawerSortedLocationData[0].province" class="province-list">
              <view
                :class="['province-item', {active: drawerSelectedProvince === '全部'}]"
                @click="drawerSelectedProvince = '全部'"
              >全部</view>
              <view
                v-for="item in drawerSortedLocationData"
                :key="item.province"
                :class="['province-item', {active: drawerSelectedProvince === item.province}]"
                @click="selectDrawerProvince(item.province)"
              >{{ item.province }}</view>
            </view>
            <view class="city-list">
              <view v-if="Array.isArray(drawerSortedLocationData) && typeof drawerSortedLocationData[0] === 'object' && drawerSortedLocationData[0].province">
                <view
                  :class="['city-item', {active: drawerSelectedCities.includes('全部城市')}]"
                  @click="toggleDrawerAllCities"
                >
                  <text>全部城市</text>
                </view>
                <view
                  v-for="city in (drawerSortedLocationData.find(i => i.province === drawerSelectedProvince)?.cities || [])"
                  :key="city"
                  :class="['city-item', {active: drawerSelectedCities.includes(city)}]"
                  @click="toggleDrawerCity(city)"
                >
                  <text>{{ city }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="city-popup-footer">
            <button class="city-popup-clear" @click="clearDrawerCity" :disabled="!drawerSelectedCities.length">清除</button>
            <button class="city-popup-confirm" :disabled="drawerSelectedCities.length === 0 && drawerSelectedProvince !== '全部'" @click="confirmDrawerCity">确定</button>
          </view>
        </view>
      </view>
      <!-- 学历弹窗 -->
      <view v-if="drawerEducationPopupVisible" class="city-popup-mask" @click="closeDrawerEducationPopup">
        <view class="city-popup city-popup-bottom" @click.stop>
          <view class="city-popup-header">
            <view class="city-popup-title">选择学历</view>
            <view class="city-popup-close" @click="closeDrawerEducationPopup">×</view>
          </view>
          <view class="popup-content-center">
            <view
              v-for="item in drawerEducationData"
              :key="item"
              :class="['center-item', {active: drawerSelectedEducations.includes(item)}]"
              @click="toggleDrawerEducation(item)"
            >{{ item }}</view>
          </view>
          <view class="city-popup-footer">
            <button class="city-popup-clear" @click="clearDrawerEducation">清除</button>
            <button class="city-popup-confirm" @click="confirmDrawerEducation">确定</button>
          </view>
        </view>
      </view>
      <!-- 经验弹窗 -->
      <view v-if="drawerExperiencePopupVisible" class="city-popup-mask" @click="closeDrawerExperiencePopup">
        <view class="city-popup city-popup-bottom" @click.stop>
          <view class="city-popup-header">
            <view class="city-popup-title">选择经验</view>
            <view class="city-popup-close" @click="closeDrawerExperiencePopup">×</view>
          </view>
          <view class="popup-content-center">
            <view
              v-for="item in drawerExperienceData"
              :key="item"
              :class="['center-item', {active: drawerSelectedExperiences.includes(item)}]"
              @click="toggleDrawerExperience(item)"
            >{{ item }}</view>
          </view>
          <view class="city-popup-footer">
            <button class="city-popup-clear" @click="clearDrawerExperience">清除</button>
            <button class="city-popup-confirm" @click="confirmDrawerExperience">确定</button>
          </view>
        </view>
      </view>
      <!-- 薪资弹窗 -->
      <view v-if="drawerSalaryPopupVisible" class="city-popup-mask" @click="closeDrawerSalaryPopup">
        <view class="city-popup city-popup-bottom" @click.stop>
          <view class="city-popup-header">
            <view class="city-popup-title">选择薪资</view>
            <view class="city-popup-close" @click="closeDrawerSalaryPopup">×</view>
          </view>
          <view class="popup-content-center">
            <view
              v-for="item in drawerSalaryData"
              :key="item"
              :class="['center-item', {active: drawerSelectedSalaries.includes(item)}]"
              @click="toggleDrawerSalary(item)"
            >{{ item }}</view>
          </view>
          <view class="city-popup-footer">
            <button class="city-popup-clear" @click="clearDrawerSalary">清除</button>
            <button class="city-popup-confirm" @click="confirmDrawerSalary">确定</button>
          </view>
        </view>
      </view>
      <!-- 岗位卡片 -->
      <scroll-view scroll-y class="drawer-content">
        <view v-if="filteredDrawerJobs.length === 0" class="empty-state">
          <view class="empty-icon">📋</view>
          <view class="empty-text">暂时没有符合条件的岗位，换个筛选试试吧~</view>
          <button class="reset-btn" @click="resetDrawerFilters">重置筛选</button>
        </view>
        <view v-for="job in filteredDrawerJobs" :key="job.id" class="job-card" @click="goToJobDetail(job.id)">
          <view class="job-title-row">
            <text class="job-title">{{ job.title }}</text>
            <text class="job-salary">{{ job.salary }}</text>
          </view>
          <view class="job-company-row">
            <text class="company">{{ job.company }}</text>
            <text class="job-tag" v-for="(tag, i) in job.tags" :key="i">{{ tag }}</text>
          </view>
          <view class="job-meta">
            <text class="meta">{{ job.date }}</text>
            <text class="meta">{{ job.location }}</text>
            <text class="meta">{{ job.views }}看过</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isFavorite: false,
      company: {
        id: '',
        logo: '',
        company: '',
        recruitType: '',
        tags: [],
        labels: [],
        date: '',
        cities: [],
        type: '',
        intro: '',
        bizInfo: '',
        jobs: [],
        detailSections: []
      },
      backIcon: '/static/back.png',
      drawerPercent: 0.8, // 抽屉高度百分比（默认展开至最大80%，范围0.1~0.8）
      drawerStartY: 0,
      drawerStartPercent: 0.8,
      // 抽屉筛选相关
      drawerActiveJobType: '全部',
      drawerSubFilters: [
        { key: 'city', label: '城市', options: ['不限', '北京', '上海', '深圳', '广州'] },
        { key: 'degree', label: '学历', options: ['不限', '本科', '硕士', '博士'] },
        { key: 'exp', label: '经验', options: ['不限', '应届', '1-3年', '3-5年'] },
        { key: 'salary', label: '薪资', options: ['不限', '5k-10k', '10k-20k', '20k+'] }
      ],
      drawerSubFilterSelected: { city: '不限', degree: '不限', exp: '不限', salary: '不限' },
      drawerSubFilterVisible: '',
      // 弹窗相关
      drawerCityPopupVisible: false,
      drawerSelectedProvince: '',
      drawerSelectedCities: [],
      drawerEducationData: ['不限', '大专', '本科', '硕士', '博士'],
      drawerExperienceData: ['不限', '应届', '1-3年', '3-5年', '5年以上'],
      drawerSalaryData: ['不限', '5k-10k', '10k-20k', '20k+'],
      drawerEducationPopupVisible: false,
      drawerExperiencePopupVisible: false,
      drawerSalaryPopupVisible: false,
      drawerSelectedEducations: [],
      drawerSelectedExperiences: [],
      drawerSelectedSalaries: [],
      // 城市mock数据
      drawerLocationData: [
        { province: '广东', cities: ['广州', '深圳', '珠海'] },
        { province: '北京', cities: ['北京'] },
        { province: '上海', cities: ['上海'] },
        { province: '江苏', cities: ['南京', '苏州', '无锡'] },
        { province: '四川', cities: ['成都', '绵阳', '乐山', '自贡'] },
        { province: '山东', cities: ['济南', '青岛', '烟台', '潍坊'] },
        { province: '河南', cities: ['郑州', '洛阳', '开封', '新乡'] },
        { province: '辽宁', cities: ['沈阳', '大连', '鞍山', '本溪'] },
        { province: '福建', cities: ['福州', '厦门', '泉州', '漳州'] }
      ],
    }
  },
  onLoad(options) {
    const id = options.id;
    this.fetchCompanyDetail(id);
    // 检查收藏状态
    this.checkFavoriteStatus(id);
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    async fetchCompanyDetail(id) {
      // ===== TODO: ↓↓↓ 以下 mock 数据请替换为实际接口请求 ↓↓↓ =====
      // 模拟所有岗位数据（与首页一致）
      const allJobs = [
        {
          id: 'job1',
          title: '小红书用户产品经理',
          salary: '18-42k*16',
          company: '小红书',
          tags: ['文娱', '999人', '2025届'],
          date: '2025-4',
          location: '北京石景山',
          views: 450,
          jobType: ['IT/互联网'],
          experience: '1-3年',
          education: '本科',
          companyId: 'company1'
        },
        {
          id: 'job2',
          title: '小红书前端开发工程师',
          salary: '25-45k*16',
          company: '小红书',
          tags: ['互联网', '10000人以上', '2025届', 'React', 'Node.js'],
          date: '2025-5',
          location: '北京',
          views: 1280,
          jobType: ['IT/互联网'],
          experience: '3-5年',
          education: '硕士',
          companyId: 'company1'
        },
        {
          id: 'job3',
          title: '腾讯-游戏策划',
          salary: '15-30k*16',
          company: '腾讯',
          tags: ['游戏', '5000人', '2025届', '王者荣耀'],
          date: '2025-5',
          location: '深圳南山',
          views: 980,
          jobType: ['游戏'],
          experience: '应届',
          education: '本科',
          companyId: 'company3'
        },
        {
          id: 'job4',
          title: '阿里巴巴-Java后端开发',
          salary: '22-45k*16',
          company: '阿里巴巴',
          tags: ['云计算', '10000人以上', 'P6', '分布式'],
          date: '2025-4',
          location: '浙江杭州',
          views: 1500,
          jobType: ['IT/互联网'],
          experience: '5年以上',
          education: '博士',
          companyId: 'company4'
        },
        {
          id: 'job5',
          title: '小红书-增长数据分析师',
          salary: '18-30k*16',
          company: '小红书',
          tags: ['数据', 'Python', 'BI'],
          date: '2025-5',
          location: '上海浦东',
          views: 620,
          jobType: ['数据'],
          experience: '1-3年',
          education: '本科',
          companyId: 'company1'
        },
        {
          id: 'job6',
          title: '小红书-视觉设计实习生',
          salary: '6-8k*12',
          company: '小红书',
          tags: ['设计', '实习', 'UI'],
          date: '2025-5',
          location: '北京朝阳',
          views: 330,
          jobType: ['设计'],
          experience: '应届',
          education: '大专',
          companyId: 'company1'
        },
        {
          id: 'job7',
          title: '小红书-后端开发(GO)',
          salary: '20-35k*16',
          company: '小红书',
          tags: ['Go', '微服务', '容器'],
          date: '2025-6',
          location: '武汉光谷',
          views: 410,
          jobType: ['IT/互联网'],
          experience: '3-5年',
          education: '本科',
          companyId: 'company1'
        },
        {
          id: 'job8',
          title: '小红书-产品运营',
          salary: '12-18k*14',
          company: '小红书',
          tags: ['运营', '新媒体', '增长'],
          date: '2025-6',
          location: '广州天河',
          views: 540,
          jobType: ['运营'],
          experience: '1-3年',
          education: '本科',
          companyId: 'company1'
        }
        // ...可继续补充更多岗位
      ];
      // 只取当前公司id的岗位
      const jobs = allJobs.filter(job => job.companyId === id);
      // 其它公司信息mock
      const mockData = {
        id: id,
        company: '小红书',
        logo: 'https://img1.baidu.com/it/u=1739539544,3582138974&fm=253&fmt=auto&app=120&f=PNG?w=243&h=243',
        title: '小红书春季招聘',
        recruitType: '春招正式批',
        tags: ['2025届', '商业化', '社交产品', '高薪岗位'],
        date: '2025.4.15~06.07',
        cities: ['北京', '上海', '湖北', '江苏'],
        type: '互联网上市公司',
        intro: '小红书是一家生活方式分享平台，致力于帮助用户发现和分享美好生活。',
        bizInfo: '注册资本：1亿人民币\n法定代表人：张三\n成立日期：2013-06-06\n企业类型：有限责任公司',
        jobs: jobs
      };
      // 计算招聘省市
      const locations = jobs.map(j=>j.location?.replace(/市|区|县|镇|乡|自治州|自治区|特别行政区|省/g,'').trim()).filter(Boolean);
      const uniqueLocs = Array.from(new Set(locations));
      const recruitStr = uniqueLocs.join('、');

      mockData.detailSections = [
        { title: '公司介绍', content: mockData.intro },
        { title: '工商信息', content: mockData.bizInfo },
        { title: '招聘省市', content: recruitStr || '暂未公布' }
      ];

      // ===== TODO: ↑↑↑ 以上 mock 数据请替换为实际接口请求 ↑↑↑ =====

      this.company = mockData;
    },
    onDrawerTouchStart(e) {
      this.drawerStartY = e.touches[0].clientY;
      this.drawerStartPercent = this.drawerPercent;
    },
    onDrawerTouchMove(e) {
      const deltaY = e.touches[0].clientY - this.drawerStartY;
      const windowHeight = uni.getSystemInfoSync().windowHeight;
      let percent = this.drawerStartPercent - deltaY / windowHeight;
      percent = Math.max(0.1, Math.min(0.8, percent));
      this.drawerPercent = percent;
    },
    onDrawerTouchEnd() {
      if (this.drawerPercent > 0.4) {
        this.drawerPercent = 0.8;
      } else {
        this.drawerPercent = 0.1;
      }
    },
    // 一级tab
    setDrawerActiveJobType(type) {
      this.drawerActiveJobType = type;
    },
    // 二级筛选下拉
    toggleDrawerSubFilter(key) {
      this.drawerSubFilterVisible = this.drawerSubFilterVisible === key ? '' : key;
    },
    selectDrawerSubFilter(key, opt) {
      this.drawerSubFilterSelected[key] = opt;
      this.drawerSubFilterVisible = '';
    },
    resetDrawerFilters() {
      this.drawerSubFilterSelected = { city: '不限', degree: '不限', exp: '不限', salary: '不限' };
      this.drawerActiveJobType = '全部';
      this.drawerSelectedCities = [];
      this.drawerSelectedEducations = [];
      this.drawerSelectedExperiences = [];
      this.drawerSelectedSalaries = [];
    },
    // 城市弹窗
    openDrawerCityPopup() {
      this.drawerCityPopupVisible = true;
      this.drawerSelectedProvince = this.drawerSortedLocationData[0]?.province || '';
    },
    closeDrawerCityPopup() {
      this.drawerCityPopupVisible = false;
    },
    selectDrawerProvince(province) {
      this.drawerSelectedProvince = province;
    },
    toggleDrawerAllCities() {
      if (this.drawerSelectedCities.includes('全部城市')) {
        this.drawerSelectedCities = [];
      } else {
        this.drawerSelectedCities = ['全部城市'];
      }
    },
    toggleDrawerCity(city) {
      if (this.drawerSelectedCities.includes('全部城市')) {
        this.drawerSelectedCities = [];
      }
      const idx = this.drawerSelectedCities.indexOf(city);
      if (idx > -1) {
        this.drawerSelectedCities.splice(idx, 1);
      } else {
        this.drawerSelectedCities.push(city);
      }
    },
    confirmDrawerCity() {
      if (this.drawerSelectedCities.includes('全部城市')) {
        this.drawerSubFilterSelected.city = '全部城市';
      } else if (this.drawerSelectedCities.length === 1) {
        this.drawerSubFilterSelected.city = this.drawerSelectedCities[0];
      } else if (this.drawerSelectedCities.length > 1) {
        this.drawerSubFilterSelected.city = `城市·${this.drawerSelectedCities.length}`;
      } else {
        this.drawerSubFilterSelected.city = '不限';
      }
      this.closeDrawerCityPopup();
    },
    drawerCityBtnText() {
      if (
        this.drawerSelectedProvince === '全部' &&
        (this.drawerSelectedCities.includes('全部城市') || this.drawerSelectedCities.length === 0)
      ) {
        return '全部';
      }
      if (this.drawerSelectedCities.includes('全部城市')) {
        return '全部';
      }
      if (this.drawerSelectedCities.length > 1) {
        return `城市·${this.drawerSelectedCities.length}`;
      }
      if (this.drawerSelectedCities.length === 1) {
        return this.drawerSelectedCities[0];
      }
      return '城市';
    },
    clearDrawerCity() {
      this.drawerSelectedCities = [];
    },
    // 学历弹窗
    openDrawerEducationPopup() { this.drawerEducationPopupVisible = true; },
    closeDrawerEducationPopup() { this.drawerEducationPopupVisible = false; },
    toggleDrawerEducation(item) {
      if (item === '不限') {
        this.drawerSelectedEducations = ['不限'];
      } else {
        const idx = this.drawerSelectedEducations.indexOf(item);
        if (this.drawerSelectedEducations.includes('不限')) {
          this.drawerSelectedEducations = [item];
        } else if (idx > -1) {
          this.drawerSelectedEducations.splice(idx, 1);
        } else {
          this.drawerSelectedEducations.push(item);
        }
      }
    },
    confirmDrawerEducation() {
      if (this.drawerSelectedEducations.length === 1) {
        this.drawerSubFilterSelected.degree = this.drawerSelectedEducations[0];
      } else if (this.drawerSelectedEducations.length > 1) {
        this.drawerSubFilterSelected.degree = `学历·${this.drawerSelectedEducations.length}`;
      } else {
        this.drawerSubFilterSelected.degree = '学历';
      }
      this.closeDrawerEducationPopup();
    },
    clearDrawerEducation() { this.drawerSelectedEducations = []; },
    // 经验弹窗
    openDrawerExperiencePopup() { this.drawerExperiencePopupVisible = true; },
    closeDrawerExperiencePopup() { this.drawerExperiencePopupVisible = false; },
    toggleDrawerExperience(item) {
      if (item === '不限') {
        this.drawerSelectedExperiences = ['不限'];
      } else {
        const idx = this.drawerSelectedExperiences.indexOf(item);
        if (this.drawerSelectedExperiences.includes('不限')) {
          this.drawerSelectedExperiences = [item];
        } else if (idx > -1) {
          this.drawerSelectedExperiences.splice(idx, 1);
        } else {
          this.drawerSelectedExperiences.push(item);
        }
      }
    },
    confirmDrawerExperience() {
      if (this.drawerSelectedExperiences.length === 1) {
        this.drawerSubFilterSelected.exp = this.drawerSelectedExperiences[0];
      } else if (this.drawerSelectedExperiences.length > 1) {
        this.drawerSubFilterSelected.exp = `经验·${this.drawerSelectedExperiences.length}`;
      } else {
        this.drawerSubFilterSelected.exp = '经验';
      }
      this.closeDrawerExperiencePopup();
    },
    clearDrawerExperience() { this.drawerSelectedExperiences = []; },
    // 薪资弹窗
    openDrawerSalaryPopup() { this.drawerSalaryPopupVisible = true; },
    closeDrawerSalaryPopup() { this.drawerSalaryPopupVisible = false; },
    toggleDrawerSalary(item) {
      if (item === '不限') {
        this.drawerSelectedSalaries = ['不限'];
      } else {
        const idx = this.drawerSelectedSalaries.indexOf(item);
        if (this.drawerSelectedSalaries.includes('不限')) {
          this.drawerSelectedSalaries = [item];
        } else if (idx > -1) {
          this.drawerSelectedSalaries.splice(idx, 1);
        } else {
          this.drawerSelectedSalaries.push(item);
        }
      }
    },
    confirmDrawerSalary() {
      if (this.drawerSelectedSalaries.length === 1) {
        this.drawerSubFilterSelected.salary = this.drawerSelectedSalaries[0];
      } else if (this.drawerSelectedSalaries.length > 1) {
        this.drawerSubFilterSelected.salary = `薪资·${this.drawerSelectedSalaries.length}`;
      } else {
        this.drawerSubFilterSelected.salary = '薪资';
      }
      this.closeDrawerSalaryPopup();
    },
    clearDrawerSalary() { this.drawerSelectedSalaries = []; },
    goToJobDetail(id) {
      if (!id) return;
      uni.navigateTo({ url: `/pages/job-detail/index?id=${id}` });
    },

    toggleFavorite() {
      if (this.isFavorite) {
        // 如果已收藏，取消收藏
        this.isFavorite = false;
        // 从本地存储中移除收藏
        this.removeFromFavorites();
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        });
        
        // TODO: 调用取消收藏接口
      } else {
        // 如果未收藏，添加到收藏
        this.isFavorite = true;
        // 添加到本地存储
        this.addToFavorites();
        uni.showToast({
          title: '已添加到我的收藏',
          icon: 'success'
        });
        
        // TODO: 调用收藏接口
      }
    },

    unfavoriteCompany() {
      if (this.isFavorite) {
        // 取消收藏
        this.isFavorite = false;
        this.removeFromFavorites();
        uni.showToast({
          title: '已取消收藏',
          icon: 'success'
        });
        
        // TODO: 调用取消收藏接口
      }
    },

    // 添加到收藏列表
    addToFavorites() {
      try {
        const favorites = uni.getStorageSync('favoriteCompanies') || [];
        const companyData = {
          id: this.company.id,
          company: this.company.company,
          logo: this.company.logo,
          type: this.company.type,
          tags: this.company.tags,
          addTime: new Date().getTime()
        };
        
        // 检查是否已经存在
        const existingIndex = favorites.findIndex(item => item.id === this.company.id);
        if (existingIndex === -1) {
          favorites.unshift(companyData); // 添加到列表开头
          uni.setStorageSync('favoriteCompanies', favorites);
        }
      } catch (error) {
        console.error('保存收藏失败:', error);
      }
    },

    // 从收藏列表移除
    removeFromFavorites() {
      try {
        const favorites = uni.getStorageSync('favoriteCompanies') || [];
        const filteredFavorites = favorites.filter(item => item.id !== this.company.id);
        uni.setStorageSync('favoriteCompanies', filteredFavorites);
      } catch (error) {
        console.error('移除收藏失败:', error);
      }
    },

    // 检查收藏状态
    checkFavoriteStatus(companyId) {
      try {
        const favorites = uni.getStorageSync('favoriteCompanies') || [];
        this.isFavorite = favorites.some(item => item.id === companyId);
      } catch (error) {
        console.error('检查收藏状态失败', error);
        this.isFavorite = false;
      }
    },
    isDrawerTabExpanded(key) {
      if (key === 'city') return this.drawerCityPopupVisible;
      if (key === 'degree') return this.drawerEducationPopupVisible;
      if (key === 'exp') return this.drawerExperiencePopupVisible;
      if (key === 'salary') return this.drawerSalaryPopupVisible;
      return this.drawerSubFilterVisible === key;
    },
  },
  computed: {
    drawerStyle() {
      return `height: ${this.drawerPercent * 100}vh;`;
    },
    drawerJobTypeTabs() {
      if (!this.company || !this.company.jobs || !Array.isArray(this.company.jobs)) {
        return ['全部'];
      }
      const types = new Set();
      this.company.jobs.forEach(job => {
        if (Array.isArray(job.jobType)) job.jobType.forEach(type => types.add(type));
      });
      return ['全部', ...Array.from(types)];
    },
    filteredDrawerJobs() {
      if (!this.company || !this.company.jobs || !Array.isArray(this.company.jobs)) {
        return [];
      }
      return this.company.jobs.filter(job => {
        // 一级筛选
        const jobTypeMatch = this.drawerActiveJobType === '全部' || (job.jobType && job.jobType.includes(this.drawerActiveJobType));
        // 二级筛选
        const cityKey = this.drawerSubFilterSelected.city;
        const degreeKey = this.drawerSubFilterSelected.degree;
        const expKey = this.drawerSubFilterSelected.exp;
        const salaryKey = this.drawerSubFilterSelected.salary;
        const cityMatch = cityKey === '不限' || (cityKey && job.location && job.location.includes(cityKey));
        const educationMatch = degreeKey === '不限' || (degreeKey && job.education && degreeKey === job.education);
        const experienceMatch = expKey === '不限' || (expKey && job.experience && expKey === job.experience);
        const salaryMatch = salaryKey === '不限' || (salaryKey && job.salary && salaryKey === job.salary);
        return jobTypeMatch && cityMatch && educationMatch && experienceMatch && salaryMatch;
      });
    },
    drawerSortedLocationData() {
      // 省份和城市按拼音首字母排序，并合并同名省份
      const provinceMap = {};
      this.drawerLocationData.forEach(item => {
        if (!provinceMap[item.province]) {
          provinceMap[item.province] = new Set(item.cities);
        } else {
          item.cities.forEach(city => provinceMap[item.province].add(city));
        }
      });
      return Object.keys(provinceMap)
        .map(province => ({
          province,
          cities: Array.from(provinceMap[province]).sort((a, b) => a.localeCompare(b, 'zh', {sensitivity: 'base'}))
        }))
        .sort((a, b) => a.province.localeCompare(b.province, 'zh', {sensitivity: 'base'}));
    },
    drawerCurrentProvinceCities() {
      return (this.drawerSortedLocationData.find(i => i.province === this.drawerSelectedProvince)?.cities) || [];
    },
    drawerIsAllCitiesSelected() {
      return this.drawerCurrentProvinceCities.length > 0 &&
        this.drawerCurrentProvinceCities.every(city => this.drawerSelectedCities.includes(city));
    },
  }
}
</script>

<style scoped>
.header {
  position: relative;
  background: transparent;
  padding: 110rpx 36rpx 40rpx;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-button {
  position: absolute;
  top: 98rpx;
  left: 36rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 32rpx;
  transition: all 0.3s ease;
  border: 1rpx solid rgba(16, 185, 129, 0.2);
}

.back-button:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0) invert(1);
}

.back-icon:active {
  opacity: 1;
}

.page-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #fff;
  text-align: center;
  flex: 1;
}

.company-detail-container {
  min-height: 100%;
  background: linear-gradient(160deg, #141a24 0%, #10151d 60%, #0d141b 100%);
  color: #fff;
  padding-bottom: 32rpx;
}
.header-bar {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0 24rpx;
  height: 88rpx;
}
.back-btn {
  position: relative;
  left: 30rpx;
  width: 48rpx;
  height: 48rpx;
  z-index: 1;
  margin-top: 100rpx;
}
.back-arrow {
  font-size: 36rpx;
  color: var(--primary-color);
  font-weight: bold;
}
.back-arrow-img {
  width: 36rpx;
  height: 36rpx;
  display: flex;
}
.spacer {
  flex: 1;
}
.iconfont.icon-star {
  font-size: 36rpx;
  color: #fff;
}
.company-header {
  display: flex;
  flex-direction: row;
  place-items: center;
  align-items: center;
  padding: 32rpx 32rpx 8rpx 32rpx;
  gap: 16rpx;
}
.company-logo {
  width: 110rpx;
  height: 110rpx;
  border-radius: 20rpx;
  object-fit: cover;
  margin-left: 0;
  margin-top: 12px;
  box-shadow: 0 12rpx 28rpx rgba(0,0,0,0.35);
  border: 2rpx solid rgba(255,255,255,0.2);
}
.company-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 16rpx;
  gap: 6rpx;
}

.company-name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 64rpx;
}

.company-name {
  font-size: 44rpx;
  font-weight: 800;
  color: #fff;
  margin-top: 8rpx;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.favorite-btn-inline {
  background: transparent;
  border: none;
  outline: none;
  padding: 8rpx;
  transition: all 0.3s ease;
  margin-left: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64rpx;
  height: 64rpx;
  position: relative;
  z-index: 10;
  flex-shrink: 0;
}

.favorite-btn-inline::after {
  border: none;
}

.favorite-btn-inline:hover {
  transform: translateY(-1rpx);
}

.favorite-btn-inline:active {
  transform: translateY(0);
  box-shadow: 0 2rpx 6rpx rgba(16, 185, 129, 0.3);
}

.favorite-icon {
  width: 40rpx;
  height: 40rpx;
  display: block;
}
.company-name {
  font-size: 44rpx;
  font-weight: bold;
  color: #fff;
  margin-top: 8rpx;
}
.company-type {
  font-size: 28rpx;
  color: #fff;
  margin-bottom: -2rpx;
  margin-top: 2px;
}
.company-tags {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  margin: 12rpx 0 6rpx;
  flex-wrap: wrap;
  gap: 10rpx;
  padding: 0 30rpx;
}
.tag {
  background: rgba(255,255,255,0.14);
  color: #ffffff;
  font-size: 22rpx;
  border-radius: 999rpx;
  padding: 6rpx 14rpx;
  margin-right: 0;
  margin-bottom: 8rpx;
  border: 1rpx solid rgba(255,255,255,0.22);
}
.company-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  padding: 0 30rpx;
  margin-top: 6rpx;
}
.label {
  background: rgba(0, 179, 134, 0.18);
  color: #fff;
  font-size: 22rpx;
  border-radius: 999rpx;
  padding: 6rpx 14rpx;
  border: 1rpx solid rgba(0, 212, 163, 0.35);
}
.section {
  margin: 28rpx 24rpx 0 24rpx;
}
.section-title {
	margin-left: 16rpx;
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 12rpx;
  color: #fff;
}
.section-content {
	margin-left: 16rpx;
  font-size: 26rpx; 
  color: #fff; 
  line-height: 1.8;
  white-space: pre-line; 
  background: rgba(255,255,255,0.04);
  border: 1rpx solid rgba(255,255,255,0.08);
  border-radius: 16rpx;
  padding: 18rpx;
} 
.drawer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  box-shadow: 0 -10rpx 32rpx rgba(0,0,0,0.16);
  z-index: 999;
  transition: height 0.2s;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.drawer-bar {
  width: 96rpx;
  height: 10rpx;
  background: #e8edf3;
  border-radius: 8rpx;
  margin: 18rpx auto 10rpx auto;
}
.drawer-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 24rpx 24rpx 24rpx;
}
.job-card {
  background: #fff;
  border-radius: 22rpx;
  box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.06);
  padding: 32rpx 24rpx;
  margin-bottom: 24rpx;
  border: 1rpx solid #eef2f7;
}
.job-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8rpx;
}
.job-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #222;
}
.job-salary {
  color: #ff2d2d;
  font-size: 32rpx;
  font-weight: bold;
}
.job-company-row {
  flex-direction: row;
  place-items: center;
  margin: 16rpx 0;
}
.company {
  color: #666;
  font-size: 26rpx;
  margin-right: 16rpx;
}
.job-tag {
  background: #f4f6f9;
  color: #6b7682;
  font-size: 22rpx;
  border-radius: 999rpx;
  padding: 6rpx 12rpx;
  margin-right: 8rpx;
  margin-bottom: 8rpx;
}
.job-meta {
  display: flex;
  flex-direction: row;
  color: #98a1ab;
  font-size: 22rpx;
  gap: 24rpx;
}
.filter-row {
  height: 60rpx;
  flex-direction: row;
  display: flex;
  margin: 0 30rpx;
  overflow: hidden;
  width: calc(100vw - 60rpx);
  max-width: calc(100vw - 60rpx);
}
.filter-scroll-row {
  display: flex;
  flex-direction: row;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
}
.filter-scroll-row::-webkit-scrollbar {
  display: none;
}
.filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56rpx;
  line-height: 56rpx;
  padding: 0 36rpx;
  border-radius: 32rpx;
  background: #fff;
  color: #666;
  font-size: 28rpx;
  font-weight: 500;
  margin-right: 16rpx;
  margin-bottom: 8rpx;
  white-space: nowrap;
  flex-shrink: 0;
  box-sizing: border-box;
  border: 2rpx solid #e6e6e6;
  box-shadow: none;
  transition: all 0.2s;
}
.filter-btn.active {
  background: #fff;
  color: #00b386;
  border: 2rpx solid #00b386;
  font-weight: 700;
  box-shadow: 0 2rpx 8rpx rgba(0,179,134,0.08);
}
.sub-filter-row {
  flex-direction: row;
  display: flex;
  align-items: center;
  margin: 4rpx 0 8rpx 0; /* 缩短与一级筛选的间距 */
  background: transparent !important; /* 彻底透明背景 */
  border-radius: 0; /* 移除圆角 */
  box-shadow: none; /* 移除阴影 */
  padding: 0 16rpx; /* 统一内边距 */
  gap: 16rpx;
  height: auto;
  position: relative;
  z-index: 2;
  color: #444; /* 恢复颜色 */
}
.sub-filter-btn {
  flex: 1;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
  height: 40rpx;
  color: #888;
  border-radius: 20rpx;
  position: relative;
  padding: 0 12rpx;
  margin: 0;
  transition: background 0.2s, color 0.2s;
  box-sizing: border-box;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
}
.sub-filter-btn.selected,
.sub-filter-btn.expanded {
  color: #00b386 !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.sub-filter-btn .arrow {
  font-size: 16rpx;
  margin-left: 6rpx;
  color: #bbb;
  transition: color 0.2s;
}
.sub-filter-btn.selected .arrow,
.sub-filter-btn.expanded .arrow {
  color: #00b386 !important;
  font-weight: 700 !important;
}
.sub-filter-dropdown {
  position: absolute;
  top: 44rpx;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 12rpx;
  box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.08);
  z-index: 10;
  padding: 8rpx 0;
}
.dropdown-option {
  padding: 16rpx 0;
  text-align: center;
  color: #333;
  font-size: 26rpx;
}
.reset-btn {
  background: #05a723;
  color: #fff;
  border: none;
  border-radius: 32rpx;
  padding: 0 40rpx;
  height: 44rpx;
  font-size: 24rpx;
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 60rpx;
  color: #97a3af;
  font-size: 28rpx;
}
.empty-icon {
  font-size: 80rpx;
  margin-bottom: 24rpx;
  opacity: 0.6;
}
.empty-text {
  margin-bottom: 24rpx;
  font-size: 24rpx;
  color: #97a3af;
}
.city-popup-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.city-popup {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  box-shadow: 0 -4rpx 24rpx rgba(0,0,0,0.12);
  z-index: 1000;
  transition: height 0.2s;
}
.city-popup-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
}
.city-popup-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #222;
}
.city-popup-close {
  font-size: 36rpx;
  color: #666;
  cursor: pointer;
}
.city-popup-content {
  display: flex;
  flex-direction: row;
  min-height: 120rpx;
  max-height: calc(70vh - 96rpx);
  overflow-y: auto;
  margin-top: 24rpx;
  padding-bottom: 96rpx;
}
.city-popup-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 32rpx 40rpx 32rpx;
  background: #fff;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  border-top: 20rpx solid #ffffff;
  min-height: 80rpx;
  gap: 24rpx;
  z-index: 2;
}
.city-popup-clear {
  background: #fff;
  color: #888;
  border: 1rpx solid #ccc;
  border-radius: 16rpx;
  padding: 0 60rpx;
  height: 64rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.city-popup-clear:disabled {
  color: #ccc;
  border-color: #eee;
  cursor: not-allowed;
}
.city-popup-confirm {
  background: #05a723;
  color: #fff;
  border: none;
  border-radius: 16rpx;
  padding: 0 200rpx;
  height: 64rpx;
  font-size: 30rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.city-popup-confirm:disabled {
  background: #ccc;
  color: #fff;
}
.city-popup-bottom {
  height: 70vh;
}
.province-list {
  width: 180rpx;
  border-right: 1rpx solid #eee;
  overflow-y: auto;
  background: #f7f8fa;
}
.province-item {
  padding: 24rpx 0;
  text-align: center;
  color: #666;
  cursor: pointer;
  font-size: 28rpx;
}
.province-item.active {
  color: #222;
  font-weight: 700;
  background: #fff;
}
.city-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  background: #fff;
}
.city-item {
  flex-direction: row;
  place-items: center;
  padding: 24rpx 0;
  text-align: center;
  color: #666;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
}
.city-item.active {
  color: #05a723;
  font-weight: 700;
  background: #e8f5e8;
}
.popup-content-center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 32rpx 0 0 0;
  min-height: 120rpx;
  max-height: 60vh;
  overflow-y: auto;
  gap: 24rpx 32rpx;
}
.center-item {
  min-width: 120rpx;
  padding: 16rpx 32rpx;
  border-radius: 32rpx;
  background: transparent;
  color: #666;
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 12rpx;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  font-weight: 400;
}
.center-item.active {
  color: #333333;
  font-weight: 700;
}
</style> 